/* 设置鼠标进入的样式 */
.card_span{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%; 
    transform: translate(-50%,-50%);
    &.in{
        animation: in 0.5s ease-out   forwards;
    }
    &.out{
        animation: out 0.5s ease-out forwards;
    }
}
 
/* 设置鼠标进入时，元素的动画 */
@keyframes in{
    /* 初始关键帧 */
    0%{
        opacity: .9;
       transform: scale(0);
    }
    /* 结尾关键帧 */
    100%{
        opacity: 0;
        transform: scale(100);
    }
}
 /* 设置鼠标进入时，元素的动画 */
@keyframes out{
    /* 初始关键帧 */
    0%{
        opacity: .9;
       transform: scale(100);
    }
    /* 结尾关键帧 */
    100%{
        opacity: 0;
        transform: scale(0);
    }
}
 